<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蔬菜特价文案生成器</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            background-color: #f5f7fa;
            padding: 15px;
            color: #333;
            max-width: 900px;
            margin: 0 auto;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px 15px;
            position: relative;
            overflow: hidden;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 15px;
            color: #2c3e50;
            font-size: 20px;
            font-weight: 600;
        }
        
        .time-indicator {
            text-align: center;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            background-color: #e8f5e9;
            color: #2e7d32;
            font-weight: bold;
            font-size: 16px;
        }
        
        .page {
            display: none;
        }
        
        .page.active {
            display: block;
        }
        
        .section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .section-title {
            font-size: 16px;
            margin-bottom: 12px;
            color: #27ae60;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .items-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 10px;
        }
        
        @media (max-width: 480px) {
            .items-container {
                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            }
        }
        
        @media (max-width: 360px) {
            .items-container {
                grid-template-columns: 1fr 1fr;
            }
			.action-buttons {
        gap: 5px;
    }
    
    .action-buttons button {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 38px;
    }
        }
        
        .item {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid #e9ecef;
            min-height: 44px;
        }
        
        .item:hover {
            background-color: #e9f7ef;
            border-color: #27ae60;
        }
        
        .item.selected {
            background-color: #d4edda;
            border-color: #27ae60;
        }
        
        .item-name {
            flex: 1;
            font-size: 14px;
            white-space: nowrap;
            overflow: visible;
            text-overflow: unset;
        }
        
        .price-input {
            width: 55px;
            padding: 6px 4px;
            border: 1px solid #ddd;
            border-radius: 4px;
            text-align: right;
            font-size: 13px;
            -webkit-appearance: none;
            appearance: none;
            margin: 0 5px;
        }
        
        .price-input:focus {
            outline: none;
            border-color: #27ae60;
        }
        
        .unit-text {
            font-size: 12px;
            color: #666;
            white-space: nowrap;
        }
        
        .action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: nowrap;
    align-items: center;
}
.action-buttons button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}
        
        button {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            min-height: 44px;
            flex: 1;
            min-width: 120px;
        }
        
        .primary-btn {
            background-color: #27ae60;
            color: white;
        }
        
        .primary-btn:hover, .primary-btn:active {
            background-color: #219955;
        }
        
        .secondary-btn {
            background-color: #3498db;
            color: white;
        }
        
        .secondary-btn:hover, .secondary-btn:active {
            background-color: #2980b9;
        }
        
        .danger-btn {
            background-color: #e74c3c;
            color: white;
        }
        
        .danger-btn:hover, .danger-btn:active {
            background-color: #c0392b;
        }
        
        .output-container {
            margin-top: 25px;
        }
        
        #output {
            width: 100%;
            height: 200px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f8f9fa;
            font-size: 16px;
            line-height: 1.6;
            resize: none;
            white-space: pre-wrap;
            -webkit-appearance: none;
            appearance: none;
        }
        
        @media (max-width: 480px) {
            #output {
                height: 180px;
                font-size: 15px;
            }
			.action-buttons {
        gap: 8px;
    }
    
    .action-buttons button {
        padding: 10px 15px;
        font-size: 14px;
        min-height: 40px;
    }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            left: 20px;
            padding: 12px 20px;
            background-color: #2ecc71;
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
            text-align: center;
        }
        
        .notification.show {
            opacity: 1;
        }
        
        .nav-buttons {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
        }
        
        .nav-btn {
            padding: 12px 20px;
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 14px;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        
        .nav-btn.active {
            background-color: #27ae60;
            color: white;
            border-color: #27ae60;
        }
        
        /* 菜名管理页面样式 */
        .category-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .category-tab {
            padding: 12px 16px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            flex-shrink: 0;
            font-size: 14px;
        }
        
        .category-tab.active {
            border-bottom-color: #27ae60;
            color: #27ae60;
            font-weight: bold;
        }
        
        .category-manager {
            display: none;
            margin-bottom: 25px;
            padding: 15px;
            border-radius: 8px;
            background-color: #f8f9fa;
            border: 1px solid #e9ecef;
        }
        
        .category-manager.active {
            display: block;
        }
        
        .category-manager h3 {
            margin-bottom: 15px;
            color: #2c3e50;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            font-size: 16px;
        }
        
        .item-list {
            margin-bottom: 15px;
        }
        
        .item-row {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            gap: 8px;
        }
        
        .item-row:nth-child(even) {
            background-color: #f1f3f4;
        }
        
        .item-row:last-child {
            border-bottom: none;
        }
        
        .item-name-select, .item-price-input, .item-unit-input {
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            -webkit-appearance: none;
            appearance: none;
            min-height: 40px;
        }
        
        .item-name-select {
            flex: 2;
        }
        
        .item-price-input {
            width: 80px;
            flex-shrink: 0;
        }
        
        .item-unit-input {
            width: 70px;
            flex-shrink: 0;
        }
        
        .item-actions {
            display: flex;
            gap: 5px;
            flex-shrink: 0;
        }
        
        .delete-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            min-height: 40px;
            min-width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e74c3c;
            color: white;
        }
        
        .add-item-btn {
            margin-top: 10px;
            padding: 12px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            min-height: 44px;
            width: 100%;
        }
        
        .save-items-btn {
            margin-top: 20px;
            padding: 15px 24px;
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            display: block;
            margin-left: auto;
            margin-right: auto;
            font-size: 16px;
            min-height: 50px;
            width: 100%;
            max-width: 300px;
        }
        
        /* 菜名下拉管理页面样式 */
        .name-list {
            margin-bottom: 15px;
        }
        
        .name-row {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            gap: 8px;
        }
        
        .name-row:nth-child(even) {
            background-color: #f1f3f4;
        }
        
        .name-row:last-child {
            border-bottom: none;
        }
        
        .name-input {
            flex: 1;
            padding: 8px 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            -webkit-appearance: none;
            appearance: none;
            min-height: 40px;
        }
        
        .name-actions {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
        }
        
        /* 开关按钮样式 */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #27ae60;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        
        .toggle-label {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: #666;
        }
        
        .toggle-text {
            min-width: 25px;
            text-align: center;
        }
        
        .add-name-btn {
            margin-top: 10px;
            padding: 12px 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            min-height: 44px;
            width: 100%;
        }
        
        .section-divider {
            height: 1px;
            background-color: #ddd;
            margin: 20px 0;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            
            .container {
                padding: 15px 10px;
            }
            
            .action-buttons {
                flex-direction: column;
            }
            
            button {
                width: 100%;
            }
            
            .nav-buttons {
                flex-direction: column;
            }
            
            .item-row, .name-row {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding: 10px 5px;
            }
            
            .item-name-select {
                min-width: 120px;
            }
            
            .item-price-input {
                width: 70px;
            }
            
            .item-unit-input {
                width: 65px;
            }
            
            .name-input {
                min-width: 150px;
            }
        }
        
        @media (max-width: 480px) {
            .item-row, .name-row {
                gap: 5px;
            }
            
            .item-name-select, .item-price-input, .item-unit-input, .name-input {
                padding: 8px 6px;
                font-size: 13px;
            }
            
            .item-name-select {
                min-width: 110px;
            }
            
            .item-price-input {
                width: 60px;
            }
            
            .item-unit-input {
                width: 60px;
            }
            
            .name-input {
                min-width: 130px;
            }
            
            .toggle-switch {
                width: 45px;
                height: 22px;
            }
            
            .toggle-slider:before {
                height: 14px;
                width: 14px;
            }
            
            input:checked + .toggle-slider:before {
                transform: translateX(23px);
            }
        }
        
        /* iOS Safari 特定优化 */
        @supports (-webkit-touch-callout: none) {
            .price-input, .item-name-select, .item-price-input, .item-unit-input, .name-input, #output {
                border-radius: 8px;
            }
            
            button, .nav-btn, .add-item-btn, .delete-btn, .save-items-btn, .add-name-btn {
                border-radius: 10px;
            }
        }
        
        /* 防止iOS缩放 */
        input, select, textarea {
            font-size: 16px !important;
        }
        
        /* 安卓Chrome优化 */
        @media (-webkit-min-device-pixel-ratio:0) {
            .price-input, .item-name-select, .item-price-input, .item-unit-input, .name-input {
                min-height: 42px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>蔬菜特价文案生成器</h1>
        
        <div class="time-indicator" id="timeIndicator">
            当前时段：计算中...
        </div>
        
        <div class="nav-buttons">
            <div class="nav-btn active" data-page="generator">文案生成</div>
            <div class="nav-btn" data-page="manager">菜价管理</div>
            <div class="nav-btn" data-page="name-manager">菜名管理</div>
        </div>
        
        <!-- 文案生成页面 -->
        <div id="generator-page" class="page active">
            <div class="section">
                <div class="section-title">🥬 蔬菜区</div>
                <div class="items-container" id="vegetables"></div>
            </div>
            
            <div class="section">
                <div class="section-title">🍉 水果区</div>
                <div class="items-container" id="fruits"></div>
            </div>
            
            <div class="section">
                <div class="section-title">🐷 猪肉区</div>
                <div class="items-container" id="meat"></div>
            </div>
            
            <div class="action-buttons">
                <button id="generateBtn" class="primary-btn">生成文案</button>
                <button id="copyBtn" class="secondary-btn">复制文案</button>
                <button id="resetBtn" class="danger-btn">重置选择</button>
            </div>
            
            <div class="output-container">
                <textarea id="output" placeholder="生成的文案将显示在这里..."></textarea>
            </div>
        </div>
        
        <!-- 菜名管理页面 -->
        <div id="manager-page" class="page">
            <div class="category-tabs">
                <div class="category-tab active" data-category="vegetables">蔬菜区</div>
                <div class="category-tab" data-category="fruits">水果区</div>
                <div class="category-tab" data-category="meat">猪肉区</div>
            </div>
            
            <div id="vegetables-manager" class="category-manager active">
                <h3>蔬菜区菜品管理</h3>
                <div class="item-list" id="vegetables-list"></div>
                <button class="add-item-btn" data-category="vegetables">添加菜品</button>
            </div>

            
            <div id="fruits-manager" class="category-manager">
                <h3>水果区菜品管理</h3>
                <div class="item-list" id="fruits-list"></div>
                <button class="add-item-btn" data-category="fruits">添加菜品</button>
            </div>

            
            <div id="meat-manager" class="category-manager">
                <h3>猪肉区菜品管理</h3>
                <div class="item-list" id="meat-list"></div>
                <button class="add-item-btn" data-category="meat">添加菜品</button>
            </div>
            
            <button id="saveItemsBtn" class="save-items-btn">保存所有更改</button>
        </div>
        
        <!-- 菜名下拉管理页面 -->
        <div id="name-manager-page" class="page">
            <div class="category-tabs">
                <div class="category-tab active" data-category="vegetables">蔬菜区</div>
                <div class="category-tab" data-category="fruits">水果区</div>
                <div class="category-tab" data-category="meat">猪肉区</div>
            </div>
            
            <div id="vegetables-name-manager" class="category-manager active">
                <h3>蔬菜区菜名管理</h3>
                <div class="name-list" id="vegetables-name-list"></div>
                <button class="add-name-btn" data-category="vegetables">添加菜名</button>
            </div>
            
            
            
            <div id="fruits-name-manager" class="category-manager">
                <h3>水果区菜名管理</h3>
                <div class="name-list" id="fruits-name-list"></div>
                <button class="add-name-btn" data-category="fruits">添加菜名</button>
            </div>
            
            
            
            <div id="meat-name-manager" class="category-manager">
                <h3>猪肉区菜名管理</h3>
                <div class="name-list" id="meat-name-list"></div>
                <button class="add-name-btn" data-category="meat">添加菜名</button>
            </div>
            
            <button id="saveNamesBtn" class="save-items-btn">保存所有菜名</button>
        </div>
    </div>
    
    <div class="notification" id="notification">文案已复制到剪贴板！</div>

    <script>
        // 默认菜品数据
        const defaultItemsData = {
            vegetables: [
                { name: "全场水菜", price: "1.98", unit: "元/斤" },
                { name: "浦瓜", price: "0.98", unit: "元/斤" },
                { name: "绍菜", price: "2.68", unit: "元/斤" },
                { name: "节瓜", price: "2.58", unit: "元/斤" },
                { name: "冬瓜", price: "1.38", unit: "元/斤" },
                { name: "西红柿", price: "3.98", unit: "元/斤" },
                { name: "红薯", price: "2.98", unit: "元/斤" },
                { name: "红薯叶", price: "2.98", unit: "元/斤" },
                { name: "🌽甜玉米🌽", price: "10", unit: "元3条" }
            ],
            fruits: [
                { name: "水晶梨", price: "2.98", unit: "元/斤" },
                { name: "蜜桔", price: "2.98", unit: "元/斤" },
                { name: "阳光香印", price: "5.98", unit: "元/斤" },
                { name: "柚子", price: "2.98", unit: "元/斤" },
                { name: "嘎拉果", price: "6.98", unit: "元/斤" },
                { name: "青脆李", price: "5.98", unit: "元/斤" }
            ],
            meat: [
                { name: "新鲜大骨", price: "11.98", unit: "元/斤" },
                { name: "家猪前上肉", price: "6.98", unit: "元/斤" }
            ]
        };

        // 默认菜名数据（包含显示状态）
        const defaultNameData = {
            vegetables: [
                { name: "全场水菜", visible: true },
                { name: "蒲瓜", visible: true },
                { name: "长蒲瓜", visible: true },
                { name: "圆蒲瓜", visible: true },
                { name: "茄子", visible: true },
                { name: "青茄瓜", visible: true },
                { name: "红茄瓜", visible: true },
                { name: "圆茄瓜", visible: true },
                { name: "节瓜", visible: true },
                { name: "冬瓜", visible: true },
                { name: "苦瓜", visible: true },
                { name: "黄瓜", visible: true },
                { name: "莴笋", visible: true },
                { name: "竹笋", visible: true },
                { name: "甜玉米🌽", visible: true },
                { name: "金银玉米", visible: true },
                { name: "红苋菜", visible: true },
                { name: "绍菜", visible: true },
                { name: "芥兰", visible: true },
                { name: "宁夏菜心", visible: true },
                { name: "散花菜", visible: true },
                { name: "菜毛", visible: true },
                { name: "白菜心", visible: true },
                { name: "豆芽", visible: true },
                { name: "紫薯", visible: true },
                { name: "人参薯", visible: true },
                { name: "红薯", visible: true },
                { name: "红薯叶", visible: true },
                { name: "西红柿", visible: true },
                { name: "胡萝卜", visible: true },
                { name: "泥萝卜", visible: true },
                { name: "白萝卜", visible: true },
                { name: "土豆", visible: true },
                { name: "黄皮椒", visible: true },
                { name: "青椒", visible: true },
                { name: "青尖椒", visible: true },
                { name: "牛椒", visible: true },
                { name: "圆椒", visible: true },
                { name: "尖椒", visible: true },
                { name: "彩椒", visible: true },
                { name: "线椒", visible: true },
                { name: "小米椒", visible: true },
                { name: "四季豆", visible: true },
                { name: "豆角", visible: true },
                { name: "白豆角", visible: true },
                { name: "红豆角", visible: true },
                { name: "扁豆", visible: true },
                { name: "红扁豆", visible: true },
                { name: "芹菜", visible: true },
                { name: "西芹", visible: true },
                { name: "菠菜", visible: true },
                { name: "生菜", visible: true }
            ],
            fruits: [
                { name: "毛桃", visible: true },
                { name: "冬枣", visible: true },
                { name: "水晶梨", visible: true },
                { name: "蜜桔", visible: true },
                { name: "柿子", visible: true },
                { name: "脆柿子", visible: true },
                { name: "红柿子", visible: true },
                { name: "柚子", visible: true },
                { name: "红肉柚子", visible: true },
                { name: "白肉柚子", visible: true },
                { name: "阳光香印", visible: true },
                { name: "阳光玫瑰", visible: true },
                { name: "百香果", visible: true },
                { name: "嘎拉果", visible: true },
                { name: "青脆李", visible: true },
                { name: "四川脆李", visible: true },
                { name: "雪莲果", visible: true },
                { name: "苹果", visible: true },
                { name: "红富士", visible: true },
                { name: "香蕉", visible: true },
                { name: "橙子", visible: true },
                { name: "草莓", visible: true },
                { name: "葡萄", visible: true },
                { name: "桃子", visible: true },
                { name: "西瓜", visible: true },
                { name: "哈密瓜", visible: true },
                { name: "火龙果", visible: true },
                { name: "番石榴", visible: true },
                { name: "猕猴桃", visible: true },
                { name: "樱桃", visible: true },
                { name: "蓝莓", visible: true },
                { name: "芒果", visible: true },
                { name: "台芒果", visible: true }
            ],
            meat: [
                { name: "新鲜大骨", visible: true },
                { name: "新鲜猪肚", visible: true },
                { name: "家猪前上肉", visible: true },
                { name: "猪里脊", visible: true },
                { name: "猪五花", visible: true },
                { name: "猪排骨", visible: true },
                { name: "猪蹄", visible: true },
                { name: "猪肝", visible: true },
                { name: "猪心", visible: true },
                { name: "猪肚", visible: true },
                { name: "猪耳朵", visible: true },
                { name: "猪尾巴", visible: true }
            ]
        };

        // 从本地存储获取数据或使用默认数据
        let itemsData = JSON.parse(localStorage.getItem('itemsData')) || defaultItemsData;
        let nameData = JSON.parse(localStorage.getItem('nameData')) || defaultNameData;

        // 获取当前时段
        function getCurrentPeriod() {
            const now = new Date();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            
            // 早上6:30到11:00为早市，其他时间为晚市
            if ((hours === 6 && minutes >= 30) || (hours > 6 && hours < 11) || (hours === 11 && minutes === 0)) {
                return {
                    name: "早市",
                    text: "早市特价",
                    color: "#2e7d32",
                    bgColor: "#e8f5e9"
                };
            } else {
                return {
                    name: "晚市",
                    text: "晚市特价",
                    color: "#d32f2f",
                    bgColor: "#ffebee"
                };
            }
        }

        // 更新时段指示器
        function updateTimeIndicator() {
            const period = getCurrentPeriod();
            const indicator = document.getElementById('timeIndicator');
            indicator.textContent = `当前时段：${period.name} (${period.text})`;
            indicator.style.color = period.color;
            indicator.style.backgroundColor = period.bgColor;
            
            // 返回时段文本用于文案生成
            return period.text;
        }

        // 初始化页面
        function initializePage() {
            // 初始化时段指示器
            updateTimeIndicator();
            
            // 每分钟更新一次时段指示器
            setInterval(updateTimeIndicator, 60000);
            
            // 初始化导航
            document.querySelectorAll('.nav-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
                    document.getElementById(this.dataset.page + '-page').classList.add('active');
                });
            });
            
            // 初始化文案生成页面
            initializeGeneratorPage();
            
            // 初始化菜名管理页面
            initializeManagerPage();
            
            // 初始化菜名下拉管理页面
            initializeNameManagerPage();
            
            // 添加事件监听
            document.getElementById('generateBtn').addEventListener('click', generateCopy);
            document.getElementById('copyBtn').addEventListener('click', copyToClipboard);
            document.getElementById('resetBtn').addEventListener('click', resetSelection);
            document.getElementById('saveItemsBtn').addEventListener('click', saveItems);
            document.getElementById('saveNamesBtn').addEventListener('click', saveNames);
            
            // 防止iOS双击缩放
            let lastTouchEnd = 0;
            document.addEventListener('touchend', function (event) {
                const now = (new Date()).getTime();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);
        }

        // 初始化文案生成页面
        function initializeGeneratorPage() {
            // 渲染蔬菜区
            const vegetablesContainer = document.getElementById('vegetables');
            vegetablesContainer.innerHTML = '';
            itemsData.vegetables.forEach(item => {
                const itemElement = createItemElement(item, 'vegetables');
                vegetablesContainer.appendChild(itemElement);
            });

            // 渲染水果区
            const fruitsContainer = document.getElementById('fruits');
            fruitsContainer.innerHTML = '';
            itemsData.fruits.forEach(item => {
                const itemElement = createItemElement(item, 'fruits');
                fruitsContainer.appendChild(itemElement);
            });

            // 渲染猪肉区
            const meatContainer = document.getElementById('meat');
            meatContainer.innerHTML = '';
            itemsData.meat.forEach(item => {
                const itemElement = createItemElement(item, 'meat');
                meatContainer.appendChild(itemElement);
            });
        }

        // 创建菜品元素（文案生成页面）
        function createItemElement(item, category) {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'item';
            itemDiv.dataset.category = category;
            itemDiv.dataset.name = item.name;
            
            const nameSpan = document.createElement('span');
            nameSpan.className = 'item-name';
            nameSpan.textContent = item.name;
            
            const priceInput = document.createElement('input');
            priceInput.type = 'text';
            priceInput.className = 'price-input';
            priceInput.value = item.price;
            priceInput.dataset.unit = item.unit;
            priceInput.inputMode = 'decimal';
            
            const unitSpan = document.createElement('span');
            unitSpan.className = 'unit-text';
            unitSpan.textContent = item.unit;
            
            itemDiv.appendChild(nameSpan);
            itemDiv.appendChild(priceInput);
            itemDiv.appendChild(unitSpan);
            
            // 点击选择/取消选择
            itemDiv.addEventListener('click', function(e) {
                if (e.target !== priceInput) {
                    this.classList.toggle('selected');
                }
            });
            
            return itemDiv;
        }

        // 初始化菜名管理页面
        function initializeManagerPage() {
            // 初始化分类标签
            document.querySelectorAll('#manager-page .category-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('#manager-page .category-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.querySelectorAll('#manager-page .category-manager').forEach(manager => manager.classList.remove('active'));
                    document.getElementById(this.dataset.category + '-manager').classList.add('active');
                });
            });
            
            // 初始化添加菜品按钮
            document.querySelectorAll('#manager-page .add-item-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    addNewItem(this.dataset.category);
                });
            });
            
            // 渲染菜品列表
            renderItemLists();
        }

        // 渲染菜品列表（菜名管理页面）
        function renderItemLists() {
            // 渲染蔬菜区
            const vegetablesList = document.getElementById('vegetables-list');
            vegetablesList.innerHTML = '';
            itemsData.vegetables.forEach((item, index) => {
                const itemRow = createItemRow(item, 'vegetables', index);
                vegetablesList.appendChild(itemRow);
            });

            // 渲染水果区
            const fruitsList = document.getElementById('fruits-list');
            fruitsList.innerHTML = '';
            itemsData.fruits.forEach((item, index) => {
                const itemRow = createItemRow(item, 'fruits', index);
                fruitsList.appendChild(itemRow);
            });

            // 渲染猪肉区
            const meatList = document.getElementById('meat-list');
            meatList.innerHTML = '';
            itemsData.meat.forEach((item, index) => {
                const itemRow = createItemRow(item, 'meat', index);
                meatList.appendChild(itemRow);
            });
        }

        // 创建菜品行（菜名管理页面）
        function createItemRow(item, category, index) {
            const itemRow = document.createElement('div');
            itemRow.className = 'item-row';
            
            // 创建菜名下拉框
            const nameSelect = document.createElement('select');
            nameSelect.className = 'item-name-select';
            nameSelect.dataset.category = category;
            nameSelect.dataset.index = index;
            nameSelect.dataset.field = 'name';
            
            // 添加菜名选项（只显示可见的菜名）
            nameData[category].forEach(nameItem => {
                if (nameItem.visible) {
                    const option = document.createElement('option');
                    option.value = nameItem.name;
                    option.textContent = nameItem.name;
                    if (nameItem.name === item.name) {
                        option.selected = true;
                    }
                    nameSelect.appendChild(option);
                }
            });
            
            const priceInput = document.createElement('input');
            priceInput.type = 'text';
            priceInput.className = 'item-price-input';
            priceInput.value = item.price;
            priceInput.placeholder = '价格';
            priceInput.dataset.category = category;
            priceInput.dataset.index = index;
            priceInput.dataset.field = 'price';
            priceInput.inputMode = 'decimal';
            
            const unitInput = document.createElement('input');
            unitInput.type = 'text';
            unitInput.className = 'item-unit-input';
            unitInput.value = item.unit;
            unitInput.placeholder = '单位';
            unitInput.dataset.category = category;
            unitInput.dataset.index = index;
            unitInput.dataset.field = 'unit';
            
            const actionsDiv = document.createElement('div');
            actionsDiv.className = 'item-actions';
            
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.textContent = '-';
            deleteBtn.dataset.category = category;
            deleteBtn.dataset.index = index;
            
            itemRow.appendChild(nameSelect);
            itemRow.appendChild(priceInput);
            itemRow.appendChild(unitInput);
            itemRow.appendChild(actionsDiv);
            actionsDiv.appendChild(deleteBtn);
            
            // 添加输入事件监听
            [nameSelect, priceInput, unitInput].forEach(input => {
                input.addEventListener('input', function() {
                    updateItemData(this.dataset.category, this.dataset.index, this.dataset.field, this.value);
                });
            });
            
            // 添加删除事件监听
            deleteBtn.addEventListener('click', function() {
                deleteItem(this.dataset.category, this.dataset.index);
            });
            
            return itemRow;
        }

        // 初始化菜名下拉管理页面
        function initializeNameManagerPage() {
            // 初始化分类标签
            document.querySelectorAll('#name-manager-page .category-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    document.querySelectorAll('#name-manager-page .category-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    document.querySelectorAll('#name-manager-page .category-manager').forEach(manager => manager.classList.remove('active'));
                    document.getElementById(this.dataset.category + '-name-manager').classList.add('active');
                });
            });
            
            // 初始化添加菜名按钮
            document.querySelectorAll('#name-manager-page .add-name-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    addNewName(this.dataset.category);
                });
            });
            
            // 渲染菜名列表
            renderNameLists();
        }

        // 渲染菜名列表（菜名下拉管理页面）
        function renderNameLists() {
            // 渲染蔬菜区
            const vegetablesNameList = document.getElementById('vegetables-name-list');
            vegetablesNameList.innerHTML = '';
            nameData.vegetables.forEach((nameItem, index) => {
                const nameRow = createNameRow(nameItem, 'vegetables', index);
                vegetablesNameList.appendChild(nameRow);
            });

            // 渲染水果区
            const fruitsNameList = document.getElementById('fruits-name-list');
            fruitsNameList.innerHTML = '';
            nameData.fruits.forEach((nameItem, index) => {
                const nameRow = createNameRow(nameItem, 'fruits', index);
                fruitsNameList.appendChild(nameRow);
            });

            // 渲染猪肉区
            const meatNameList = document.getElementById('meat-name-list');
            meatNameList.innerHTML = '';
            nameData.meat.forEach((nameItem, index) => {
                const nameRow = createNameRow(nameItem, 'meat', index);
                meatNameList.appendChild(nameRow);
            });
        }

        // 创建菜名行（菜名下拉管理页面）
        function createNameRow(nameItem, category, index) {
            const nameRow = document.createElement('div');
            nameRow.className = 'name-row';
            
            const nameInput = document.createElement('input');
            nameInput.type = 'text';
            nameInput.className = 'name-input';
            nameInput.value = nameItem.name;
            nameInput.placeholder = '菜名';
            nameInput.dataset.category = category;
            nameInput.dataset.index = index;
            
            const actionsDiv = document.createElement('div');
            actionsDiv.className = 'name-actions';
            
            // 创建开关按钮
            const toggleLabel = document.createElement('label');
            toggleLabel.className = 'toggle-label';
            
            const toggleSwitch = document.createElement('div');
            toggleSwitch.className = 'toggle-switch';
            
            const toggleInput = document.createElement('input');
            toggleInput.type = 'checkbox';
            toggleInput.checked = nameItem.visible;
            toggleInput.dataset.category = category;
            toggleInput.dataset.index = index;
            
            const toggleSlider = document.createElement('span');
            toggleSlider.className = 'toggle-slider';
            
            const toggleText = document.createElement('span');
            toggleText.className = 'toggle-text';
            toggleText.textContent = nameItem.visible ? 'ON' : 'OFF';
            
            toggleSwitch.appendChild(toggleInput);
            toggleSwitch.appendChild(toggleSlider);
            toggleLabel.appendChild(toggleSwitch);
            toggleLabel.appendChild(toggleText);
            
            const deleteBtn = document.createElement('button');
            deleteBtn.className = 'delete-btn';
            deleteBtn.textContent = '-';
            deleteBtn.dataset.category = category;
            deleteBtn.dataset.index = index;
            
            nameRow.appendChild(nameInput);
            nameRow.appendChild(actionsDiv);
            actionsDiv.appendChild(toggleLabel);
            actionsDiv.appendChild(deleteBtn);
            
            // 添加输入事件监听
            nameInput.addEventListener('input', function() {
                updateNameData(this.dataset.category, this.dataset.index, 'name', this.value);
            });
            
            // 添加显示/隐藏事件监听
            toggleInput.addEventListener('change', function() {
                toggleNameVisibility(this.dataset.category, this.dataset.index);
            });
            
            // 添加删除事件监听
            deleteBtn.addEventListener('click', function() {
                deleteName(this.dataset.category, this.dataset.index);
            });
            
            return nameRow;
        }

        // 添加新菜品
        function addNewItem(category) {
            // 获取第一个可见的菜名作为默认值
            const visibleNames = nameData[category].filter(item => item.visible);
            const defaultName = visibleNames.length > 0 ? visibleNames[0].name : "新菜品";
            
            const newItem = { name: defaultName, price: "0.00", unit: "元/斤" };
            itemsData[category].push(newItem);
            renderItemLists();
        }

        // 更新菜品数据
        function updateItemData(category, index, field, value) {
            itemsData[category][index][field] = value;
        }

        // 删除菜品
        function deleteItem(category, index) {
            itemsData[category].splice(index, 1);
            renderItemLists();
        }

        // 添加新菜名
        function addNewName(category) {
            nameData[category].push({ name: "新菜名", visible: true });
            renderNameLists();
        }

        // 更新菜名数据
        function updateNameData(category, index, field, value) {
            nameData[category][index][field] = value;
			renderItemLists(); // 重新渲染菜名管理页面以更新下拉选项
        }

        // 切换菜名显示状态
        function toggleNameVisibility(category, index) {
            nameData[category][index].visible = !nameData[category][index].visible;
            renderNameLists();
            renderItemLists(); // 重新渲染菜名管理页面以更新下拉选项
        }

        // 删除菜名
        function deleteName(category, index) {
            nameData[category].splice(index, 1);
            renderNameLists();
            renderItemLists(); // 重新渲染菜名管理页面以更新下拉选项
        }

        // 保存菜品数据
        function saveItems() {
            localStorage.setItem('itemsData', JSON.stringify(itemsData));
            initializeGeneratorPage(); // 更新文案生成页面
            
            // 显示通知
            showNotification('菜品数据已保存！');
        }

        // 保存菜名数据
        function saveNames() {
            localStorage.setItem('nameData', JSON.stringify(nameData));
            
            // 显示通知
            showNotification('菜名数据已保存！');
        }

        // 生成文案
        function generateCopy() {
            const selectedItems = {
                vegetables: [],
                fruits: [],
                meat: []
            };
            
            // 收集选中的菜品
            document.querySelectorAll('.item.selected').forEach(item => {
                const category = item.dataset.category;
                const name = item.dataset.name;
                const priceInput = item.querySelector('.price-input');
                const price = priceInput.value;
                const unit = priceInput.dataset.unit;
                
                selectedItems[category].push({
                    name: name,
                    price: price,
                    unit: unit
                });
            });
            
            // 获取当前时段
            const periodText = updateTimeIndicator();
            
            // 生成文案
            let copyText = `[烟花]佳悦美超市[烟花]${periodText}[烟花]\n\n`;
            
            // 蔬菜区
            if (selectedItems.vegetables.length > 0) {
                copyText += "🥬蔬菜区🥬\n";
                selectedItems.vegetables.forEach(item => {
                    copyText += `     ${item.name}${' '.repeat(12 - item.name.length)}${item.price}${item.unit}\n`;
                });
                copyText += "\n";
            }
            
            // 水果区
            if (selectedItems.fruits.length > 0) {
                copyText += "🍉水果区🍉\n";
                selectedItems.fruits.forEach(item => {
                    copyText += `    ${item.name}${' '.repeat(14 - item.name.length)}${item.price}${item.unit}\n`;
                });
                copyText += "\n";
            }
            
            // 猪肉区
            if (selectedItems.meat.length > 0) {
                copyText += "🐷猪肉区🐷\n";
                selectedItems.meat.forEach(item => {
                    copyText += `    ${item.name}${' '.repeat(12 - item.name.length)}${item.price}${item.unit}\n`;
                });
                copyText += "\n";
            }
            
            copyText += "[庆祝][庆祝][庆祝]欢迎光临[庆祝][庆祝][庆祝]";
            
            // 显示文案
            document.getElementById('output').value = copyText;
        }

        // 复制到剪贴板
        function copyToClipboard() {
            const outputTextarea = document.getElementById('output');
            outputTextarea.select();
            
            try {
                document.execCommand('copy');
                showNotification('文案已复制到剪贴板！');
            } catch (err) {
                // 兼容移动端
                navigator.clipboard.writeText(outputTextarea.value).then(function() {
                    showNotification('文案已复制到剪贴板！');
                }, function(err) {
                    showNotification('复制失败，请手动选择并复制');
                });
            }
        }

        // 重置选择
        function resetSelection() {
            document.querySelectorAll('.item.selected').forEach(item => {
                item.classList.remove('selected');
            });
            document.getElementById('output').value = '';
        }

        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.classList.add('show');
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initializePage);
    </script>
</body>
</html>